<div class='order-show container d-flex flex-column align-items-center flex-lg-wrap flex-lg-row justify-content-center' id="order_summary" data-hook>
  <% if order_just_completed?(@order) %>
    <%= icon(name: 'check-mark-circle',
             classes: 'd-block d-lg-none mx-auto order-show-check-mark',
             width: 56,
             height: 56) %>
    <%= icon(name: 'check-mark-circle',
             classes: 'd-none d-lg-block mx-auto order-show-check-mark',
             width: 102,
             height: 102) %>
    <h5 class="w-100 text-center"><%= Spree.t(:order_success) %></h5>
    <p class="order-show-explain w-100 text-center"><%= Spree.t(:order_success_explain) %></p>
  <% end %>

  <p class="order-show-number text-uppercase w-100 text-center">
    <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
  </p>
  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
</div>
